<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>苹果官网文字高亮效果</title>
    <style>
        * {
            margin: 0;
            padding: 0;
        }
        html,body{
            height: 100%;
            width: 100%;
        }
        .video-box{
            position: absolute;
            z-index: 0;
        }
        .video{
            height: 100vh;
            width: 100%;
            object-fit: cover;
        }
        .txt-box{
            z-index: 1;
            margin-left: auto;
            margin-right: auto;
            width: 692px;
            padding-top: 80vh;
        }
        .txt-box ul {
            padding-bottom: 60vh;
        }

        li {
            font-size: 46px;
            line-height: 1.2;
            font-weight: 700;
            letter-spacing: 0em;
            font-family: SF Pro Display,SF Pro Icons,Helvetica Neue,Helvetica,Arial,sans-serif;
            display: inline;
            color: #fff;
            opacity: 0.3;
        }
    </style>
    <script src="./js/gsap.min.js"></script>
<!--    <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/ScrollTrigger.min.js"></script>-->
    <script src="./js/ScrollTrigger.min.js"></script>
</head>
<body>
    <div style="height: 100vh;width: 100%;background: pink"></div>
    <div style="position:relative;">
        <div class="video-box">
            <video class="video" src="./mp4/medium.mp4" autoplay="autoplay" muted loop></video>
        </div>
        <div class="txt-box">
            <ul>
                <li class="txt1">主动降噪效果最高提升至 2 倍。通透模式可让你听到周围的动静。</li>
                <li class="txt2">全新自适应音频功能可根据所处环境，智能调整噪音控制程度。</li>
                <li class="txt3">空间音频带来非同凡响的个性化沉浸体验。</li>
                <li class="txt4">单次充电后，电池续航可达 6 小时。</li>
            </ul>
        </div>
    </div>
    <div style="height: 100vh;width: 100%;background: pink"></div>
</body>
<script>
    // 创建一个滚动触发动画效果
    ScrollTrigger.create({
        trigger: ".video-box", // 触发器元素的选择器
        start: "top top", // 开始触发的位置（元素顶部与视口顶部对齐）
        end: "+=800", // 触发结束的位置（相对于开始位置向下滚动800像素）
        scrub: true, // 启用“刮擦”效果，根据滚动位置平滑播放动画
        pin: true, // 当动画触发时，将触发器元素固定在屏幕上
        animation: gsap.timeline() // 创建一个GSAP时间轴，定义动画序列
            .to(".txt1", { opacity: 1 }) // 渐变显示类名为".txt1"的元素
            .to(".txt1", { opacity: 0.3 }) // 将透明度渐变为0.3
            .to(".txt2", { opacity: 1 }, "<") // 渐变显示类名为".txt2"的元素，无等待时间
            .to(".txt2", { opacity: 0.3 }) // 将透明度渐变为0.3
            .to(".txt3", { opacity: 1 }, "<") // 渐变显示类名为".txt3"的元素，无等待时间
            .to(".txt3", { opacity: 0.3 }) // 将透明度渐变为0.3
            .to(".txt4", { opacity: 1 }, "<") // 渐变显示类名为".txt4"的元素，无等待时间
            .to(".txt4", { opacity: 0.3 }) // 将透明度渐变为0.3
    });

</script>
</html>
